import { Copy } from "lucide-react"

import { Button } from "~/registry/miami/ui/button"
import { Input } from "~/registry/miami/ui/input"
import { Label } from "~/registry/miami/ui/label"
import {
   Popover,
   PopoverContent,
   PopoverTrigger,
} from "~/registry/miami/ui/popover"

export function PresetShare() {
   return (
      <Popover>
         <PopoverTrigger asChild>
            <Button variant="secondary">Share</Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-[520px]">
            <div className="flex flex-col space-y-2 text-center sm:text-left">
               <h3 className="text-lg font-semibold">Share preset</h3>
               <p className="text-sm text-muted-foreground">
                  Anyone who has this link and an OpenAI account will be able to
                  view this.
               </p>
            </div>
            <div className="flex items-center space-x-2 pt-4">
               <div className="grid flex-1 gap-2">
                  <Label htmlFor="link" className="sr-only">
                     Link
                  </Label>
                  <Input
                     id="link"
                     defaultValue="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
                     readOnly
                     className="h-9"
                  />
               </div>
               <Button type="submit" size="sm" className="px-3">
                  <span className="sr-only">Copy</span>
                  <Copy />
               </Button>
            </div>
         </PopoverContent>
      </Popover>
   )
}
